<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bustling</title>
    <!-- CSS -->
    <link rel="stylesheet/less" type="text/css" href="sea-modules/bustling/normalize/2.1.3/normalize-debug.css">
    <link href='http://fonts.googleapis.com/css?family=Slackey' rel='stylesheet' type='text/css'>

    <link rel="stylesheet/less" type="text/css" href="less/bustling.less">
    <style type="text/css">
        .logo-font {
            font-family: 'Slackey', cursive;
            font-size: 55px;
        }

        html {
            font-size: 100%;
        }

        body {
            padding: 10px 60px 10px 60px;
        }

        .wrap-col {
            min-height: 50px;
            line-height: 50px;
            text-align: center;
            color: #cccccc;
            font-size: 1rem;
            background-color: #2d6987;
        }

        [class*='col-'] [class*='col-'] > .wrap-col {
            background-color: #77b2d4;
            color: #2d6987;
        }
    </style>
    <!-- CSS -->
</head>

<body>

<article class="grid">

<h1 class="logo-font">Bustling</h1>

<h2>12 栅格 等分</h2>

<section class="row">

    <div class="col-1-1">
        <div class="wrap-col">
            col-1-1
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-2">
        <div class="wrap-col">
            col-1-2
        </div>
    </div>
    <div class="col-1-2">
        <div class="wrap-col">
            col-1-2
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-3">
        <div class="wrap-col">
            col-1-3
        </div>
    </div>
    <div class="col-1-3">
        <div class="wrap-col">
            col-1-3
        </div>
    </div>
    <div class="col-1-3">
        <div class="wrap-col">
            col-1-3
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>

</section>

</article>

<article class="grid">

    <h2>12 栅格 非等分</h2>

    <section class="row">

        <div class="col-1-3">
            <div class="wrap-col">
                col-1-3
            </div>
        </div>
        <div class="col-2-3">
            <div class="wrap-col">
                col-2-3
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-2-3">
            <div class="wrap-col">
                col-2-3
            </div>
        </div>
        <div class="col-1-3">
            <div class="wrap-col">
                col-1-3
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-1-4">
            <div class="wrap-col">
                col-1-4
            </div>
        </div>
        <div class="col-3-4">
            <div class="wrap-col">
                col-3-4
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-3-4">
            <div class="wrap-col">
                col-3-4
            </div>
        </div>
        <div class="col-1-4">
            <div class="wrap-col">
                col-1-4
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-1-5">
            <div class="wrap-col">
                col-1-5
            </div>
        </div>
        <div class="col-2-5">
            <div class="wrap-col">
                col-2-5
            </div>
        </div>
        <div class="col-2-5">
            <div class="wrap-col">
                col-2-5
            </div>
        </div>

    </section>

</article>

<article class="grid">

    <h2>栅格 嵌套</h2>

    <section class="row">

        <div class="col-1-2">
            <div class="wrap-col">
                col-1-2
                <section class="row">
                    <div class="col-1-3">
                        <div class="wrap-col">
                            col-1-3
                        </div>
                    </div>
                    <div class="col-2-3">
                        <div class="wrap-col">
                            col-2-3
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="col-1-2">
            <div class="wrap-col">
                col-1-2
            </div>
        </div>

    </section>

</article>

<article class="grid">

<h2>栅格 偏移</h2>

<section class="row">

    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-4 Los-1-4">
        <div class="wrap-col">
            C-1-4 L-1-4
        </div>
    </div>
    <div class="col-1-4 Ros-1-4">
        <div class="wrap-col">
            C-1-4 R-1-4
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4 Los-2-4">
        <div class="wrap-col">
            C-1-4 L-2-4
        </div>
    </div>

</section>


<section class="row">

    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-9 Los-2-9" id="a">
        <div class="wrap-col" id="b">
            C-1-9 L-2-9
        </div>
    </div>
    <div class="col-2-9 Los-3-9 Ros-1-9" id="c">
        <div class="wrap-col" id="d">
            C-1-9 L-3-9 R-1-9
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>

</section>

<section class="row">

    <div class="col-2-12 Los-2-12 Ros-1-12">
        <div class="wrap-col">
            C-2-12 L-2-12
        </div>
    </div>
    <div class="col-4-12 Los-2-12 Ros-1-12">
        <div class="wrap-col">
            C-3-12 L-3-12 R-1-12
        </div>
    </div>

</section>

</article>

<!-- JS -->
<script type="text/javascript" src="sea-modules/bustling/jquery/1.10.2/jquery-debug.js"></script>
<script type="text/javascript" src="sea-modules/bustling/less/1.5.1/less-debug.js"></script>
<!--<script type="text/javascript" src="sea-modules/bustling/less/less-1.4.2.js"></script>-->
<script type="text/javascript" src="sea-modules/bustling/modernizr/2.7.1/modernizr-debug.js"></script>
<script type="text/javascript">
    $(function () {
        fixMixHeight();
        function fixMixHeight() {
            $(".wrap-col").each(function (index) {
                if ($(this).find(".row").length == 0) {
                    var th = $(this).parent().innerHeight();
                    var mt = 0;
                    var mb = 0;
                    if (Modernizr.flexbox) {
                        mt = parseInt($(this).css("margin-top").replace('px', ''));
                        mb = parseInt($(this).css("margin-bottom").replace('px', ''));
                    } else {
                        mt = parseInt($(this).parent().css("padding-top").replace('px', ''));
                        mb = parseInt($(this).parent().css("padding-bottom").replace('px', ''));
                    }
                    var height = th - mt - mb + "px";
                    $(this).css("height", height);
                    $(this).css("line-height", height);
                }
            });
        }
    });
</script>
<!-- JS -->

</body>
</html>